* {
    margin: 0px;
    padding: 0px;
}

.cont {
    width: 222px;
    height: 466px;
    background-color: #4183b0;
    overflow: hidden;
}

input {
    display: none;
}

.navbox {
    width: 60px;
    height: 60px;
    margin: 46px auto;
    background-color: #97cd97;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    transition: 1s;
}

.icon_titleBox {
    width: 18px;
    height: 18px;
    position: relative;
    top: 20px;
    left: 20px;
}

/* 三条横线变叉 */
.icon_titleBox span {
    height: 2px;
    width: 18px;
    background-color: white;
    border-radius: 2px;
    position: absolute;
    opacity: 1;
    transition: 1s;
}

.icon_titleBox span:nth-child(1) {
    top: 0px;
}

.icon_titleBox span:nth-child(2) {
    top: 7px;
}

.icon_titleBox span:nth-child(3) {
    top: 14px;
}

input[name="chk"]:checked~.navbox .icon_titleBox span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}


input[name="chk"]:checked~.navbox .icon_titleBox span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
input[name="chk"]:checked~.navbox .icon_titleBox span:nth-child(2) {
    opacity: 0;
}


input[name="chk"]:checked~.navbox {
    height: 360px;
}

input[name="chk"]:checked~.navbox>.navlist>.iconBox {
    opacity: 1;
    margin-left: 10px;
}

.navlist {
    width: 140px;
    height: 215px;
    position: relative;
    top: 30px;
    left: -80px;
}

.iconBox {
    width: 140px;
    height: 50px;
    transition: 1s;
    opacity: 0;
}

.iconBox:nth-child(1) {
    transition-delay: 100ms;
}

.iconBox:nth-child(2) {
    transition-delay: 150ms;
}

.iconBox:nth-child(3) {
    transition-delay: 200ms;
}

.iconBox:nth-child(4) {
    transition-delay: 250ms;
}

.iconBox:nth-child(5) {
    transition-delay: 300ms;
}


.iconBox div {
    margin-top: 15px;
}

.title {
    width: 63px;
    height: 16px;
    font-size: 12px;
    float: left;
    color: white;
    font-weight: bold;
}

.title:hover {
    margin-left: 5px;
    border-right: 5px solid #009582;
}

.icon {
    width: 16px;
    height: 17px;
    float: right;
    margin-right: 33px;
    background-image: url(../images/cd-sprite-1.svg);
}

.a {
    background-position-x: 48px;
}

.b {
    background-position-x: 96px;
}

.c {
    background-position-x: 112px;
}

.d {
    background-position-x: 80px;
}

.e {
    background-position-x: 64px;
}